<div class="orderList">
  <div class="header">
    <div>
      <d-select class="orderRange" name="orderRange" [overview]="'underlined'" [placeholder]="'全部订单'"
        [options]="options" [allowClear]="true" [(ngModel)]="orderRange" [filterKey]="'name'"
        (valueChange)="getList(orderStatusFlag, searchContent)">
      </d-select>
    </div>
    <div>作者</div>
    <div>金额</div>
    <div>状态</div>
    <div>操作</div>
  </div>
  <div class="orders">
    <div class="nodata" *ngIf="!basicDataSource">No Data</div>
    <div *ngIf="basicDataSource">
      <div class="orderData" *ngFor="let data of basicDataSource">
        <div class="orderTime">
          <span>{{ data.createdTime }}</span><span class="orderNum">订单号：{{ data.orderId }}</span>
        </div>
        <div class="data">
          <div class="collection">
            <img [src]="data.assetUrl" />
            <div class="collectionName">{{ data.collectionName }}&emsp;·&emsp;{{ data.pictureName }}</div>
            <div class="collectionId">
              {{
              data.assetId.slice(0, 12) +
              "......" +
              data.assetId.slice(-4)
              }}<i id="copy" class="icon-copy" (click)="copyId(data.assetId)"
                style="margin-left: 5px; cursor: pointer"></i>
            </div>
          </div>
          <div [ngClass]="data.orderStatus === '已取消'?'author-disabled':'author'">{{ data.issuer }}</div>
          <div [ngClass]="data.orderStatus === '已取消'?'price-disabled':'price'">￥{{ data.price }}</div>
          <div [ngClass]="data.orderStatus === '已取消'?'status-disabled':'status'">
            <div>{{ data.orderStatus }}</div>
            <div *ngIf="data.orderStatus == '待付款'" style="margin-top: 10px;">
              <app-countdown [enddate]="data.expireTime" type="orderlist"></app-countdown>
            </div>
          </div>
          <div class="operate">
            <div *ngIf="type"><a (click)="knowMore(data.collectionIndex, data)">查看详情</a></div>
            <div *ngIf="data.orderStatus != '待付款' && !type">
              <a (click)="knowMore(data.collectionIndex, data)">查看详情</a>
            </div>
            <div *ngIf="data.orderStatus == '待付款' && !type">
              <button class="payment" (click)="payOrder(data.collectionIndex, data)">付款</button>
              <a (click)="cancelOrder(data.orderId)"> 取消订单 </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <d-pagination class="pagination" [total]="total" [(pageSize)]="queryParams.pageSize"
      [(pageIndex)]="queryParams.page" [maxItems]="10" [canViewTotal]="true" [canJumpPage]="true"
      [canChangePageSize]="true" [autoFixPageIndex]="false" (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)">
    </d-pagination>
  </div>
</div>
